<template>
  <table-row-detail-dialog ref="detailDialog" @confirm="handleConfirm">
    <div class="dialog-body">
      <el-form
        ref="form"
        label-width="90px"
        v-if="dialogType === 'add' || dialogType === 'edit'"
      >
        <el-form-item label="上级菜单" v-if="parent">
          <el-input v-model="parent.authorityName" disabled></el-input>
        </el-form-item>
        <form-item-group :form-data="formData" ref="formGroup">
          <template v-slot:permission>
            <el-select
              v-model="formData.permission.value"
              style="width: 100%"
              filterable
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in authCodeList"
                :key="item.id"
                :label="item.classDesc + '(' + item.authCode + ')'"
                :value="item.authCode"
              >
              </el-option>
            </el-select>
          </template>
        </form-item-group>
      </el-form>
    </div>
  </table-row-detail-dialog>
</template>
<script>
import TableRowDetailDialog from '@/components/TableRowDetailDialog/index';
import FormItemGroup from '@/components/FormItemGroup/index';

import { add, edit, detail, authCode } from '@/api/system/authority';
import DetailAction from '@/views/_mixins/detail-action';

export default {
  name: 'ItemDetail',
  mixins: [DetailAction],
  components: {
    TableRowDetailDialog,
    FormItemGroup,
  },
  props: {},
  data() {
    return {
      parent: null,
      authCodeList: [],
    };
  },
  computed: {},
  created() {},
  methods: {
    showExpHandle(data) {
      if (this.dialogType === 'add') {
        this.parent = data;
        if (data) this.formData.menuUrl.value = this.parent.menuUrl + '/';
      }
      authCode().then((res) => {
        let codeArr = [];
        this.authCodeList = [];
        res.rows.forEach((item) => {
          if (codeArr.indexOf(item.authCode) === -1) {
            this.authCodeList.push(item);
            codeArr.push(item.authCode);
          }
        });
      });
    },

    //初始化表单数据
    initFormData() {
      this.formData = {
        authorityName: { label: '菜单名称', value: '', required: true },
        menuUrl: { label: 'URL', value: '', required: true,maxlength:100 },
        permission: { label: '权限标识', value: [], type: ':slot' },
        dataIndex: { label: '菜单排序', type: 'number', value: 1 },
        description: { label: '菜单描述', type: 'textarea' },
        type: {
          label: '菜单类型',
          type: 'select',
          dictKey: 'authority_type',
          value: 1,
        },
        enabled: {
          label: '菜单状态',
          type: 'select',
          dictKey: 'data_status',
          value: 1,
        },
      };
    },
    /**
     * 获取记录详情
     * 填充表单数据对象
     * */
    getDetail(data) {
      this.id = data.authorityId;
      detail(this.id).then((res) => {
        res.type = res.type.toString();
        this.itemData = res;
        for (let key in this.formData) {
          this.formData[key].value = res[key] || '';
        }
        this.formData.permission.value =
          this.formData.permission.value.split(',');
      });
    },

    /**
     * 添加记录
     * 校验表单数据后，add接口
     */
    submitAdd(data) {
      if (this.parent) {
        data.parentId = this.parent.authorityId;
      }
      data.permission = data.permission.join(',');
      add(data).then(this.submitSuccess);
    },
    /**
     * 记录详情数据编辑提交
     * 校验表单数据后，调用edit接口
     */
    submitEdit(data) {
      data.permission = data.permission.join(',');
      edit(this.id, data).then(this.submitSuccess);
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-body {
}
</style>
